<template>
  <div>
    <p :style="{ marginBottom: '20px' }">
      <CloudCheckbox :checked="checked" :disabled="disabled" @change="onChange">
        {{ label }}
      </CloudCheckbox>
    </p>
    <p>
      <CloudButton type="primary" size="small" @click="toggleChecked">
        {{ !checked ? "Check" : "Uncheck" }}
      </CloudButton>
      <CloudButton
        :style="{ marginLeft: '10px' }"
        type="primary"
        size="small"
        @click="toggleDisable"
      >
        {{ !disabled ? "Disable" : "Enable" }}
      </CloudButton>
    </p>
  </div>
</template>

<script>
export default {
  title: '5.受控的checkbox ',
  subTitle: '动checkbox',
  data() {
    return {
      checked: true,
      disabled: false,
    }
  },
  computed: {
    label() {
      const { checked, disabled } = this;
      return `${checked ? 'Checked' : 'Unchecked'}-${disabled ? 'Disabled' : 'Enabled'}`;
    },
  },
  methods: {
    toggleChecked() {
      this.checked = !this.checked;
    },
    toggleDisable() {
      this.disabled = !this.disabled;
    },
    onChange(e) {
      this.checked = e.target.checked;
    },
  }
}
</script>

<style lang="scss">
</style>